<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		function CanvasGame(imgArr) {
			this.imgArr = imgArr;
			this.cav = document.createElement("canvas");
			this.ctx = this.cav.getContext("2d");
			this.man = [];
			this.heroArr = [];
			this.monsterArr = []; 
		
			this.scoreArr=[];
		}
		CanvasGame.prototype.init = function() {
			this.style();
			this.monster(); 
			this.hero(); 
			this.heroMove(); 
			this.scoreBorder();
		}
		CanvasGame.prototype.style = function() {
			var than = this;
			this.cav.width = 650;
			this.cav.height = 600;
			document.body.appendChild(this.cav);
			var bgImage = new Image();
			bgImage.src = this.imgArr[0].imgUrl;
			bgImage.onload = function() {
				than.ctx.drawImage(this, 0, 0);
			};
			window.bg = bgImage;
			
		}
		CanvasGame.prototype.monster = function() {
			
			this.monsterArr.splice(0, 2);
			var than = this;
			var monsterImage = new Image();
			monsterImage.src = this.imgArr[2].imgUrl;
			var x = Math.floor(Math.random() * (512 - monsterImage.width)); 
			var y = Math.floor(Math.random() * (418 - monsterImage.height)); 
			monsterImage.onload = function() {
				than.ctx.drawImage(this, x, y);
			};
			
			this.monsterArr.push(x, y);
			window.monster = monsterImage;
		}
		CanvasGame.prototype.hero = function() {
			
			this.heroArr.splice(0, 2);
			var than = this;
			// Hero image
			var heroImage = new Image();
			heroImage.src = this.imgArr[1].imgUrl;
			var x = Math.floor(Math.random() * (512 - heroImage.width)); 
			var y = Math.floor(Math.random() * (418 - heroImage.height));
			heroImage.onload = function() {
				than.ctx.drawImage(this, x, y);
			};
			
			this.heroArr.push(x, y);
			window.hero = heroImage;
		}
		CanvasGame.prototype.heroMove = function() {
			var than = this;
			
			var num=0;
			
			this.scoreArr.push(num);
			var heroSpeen = 10;
			
			var x = this.heroArr[0];
			var y = this.heroArr[1];
			document.addEventListener("keydown", function(e) {
				
				var a = than.monsterArr[0];
				var b = than.monsterArr[1];
				
				than.man.splice(0, 1);
				switch (e.keyCode) {
					case 37:
						if (x > 9) {
							x -= heroSpeen;
						};
						break;
					case 38:
						if (y > 7) {
							y -= heroSpeen;
						};
						break;
					case 39:
						if (x < 470) {
							x += heroSpeen;
						};
						break;
					case 40:
						if (y < 440) {
							y += heroSpeen;
						};
						break;
				}
				console.log(x,y);
				than.ctx.clearRect(0, 0, 512, 418);
				than.ctx.drawImage(bg, 0, 0);
				than.ctx.drawImage(monster, a, b);
				than.ctx.drawImage(hero, x, y);
				than.man.push(hero);
				
				if (Math.abs(x - a) < 20 && Math.abs(y - b) < 20) {
					
					than.scoreArr.splice(0,1);
					
					than.monster();
					
					var c = than.monsterArr[0];
					var d = than.monsterArr[1];
					than.ctx.clearRect(0, 0, 512, 418);
					than.ctx.drawImage(bg, 0, 0);
					than.ctx.drawImage(monster, c, d);
					than.ctx.drawImage(hero, x, y);
					than.man.push(hero);
					
					num++;
					than.scoreArr.push(num);
					than.scoreBorder();
				}

			}, false);
		}
		CanvasGame.prototype.scoreBorder=function(){
			this.ctx.clearRect(512,0,130,100);
            this.ctx.fillstyle="red";
			this.ctx.font="20px 微软雅黑";
			this.ctx.fillText("分数："+this.scoreArr[0],520,40);
		}
		var canvasgame = new CanvasGame([
			{imgUrl: "./img/background.png"},			
			{imgUrl: "./img/hero.png"},
			{imgUrl: "./img/monster.png"}
				
			
		]);
		canvasgame.init();
	</script>
</html>
